<template>
	<view class="all">
		<view class="tr">
			<image src="../../static/images/information1.png" style="width: 80rpx; height: 80rpx;"></image>
			<view class="tit">校友会最新资讯</view>

		</view>
		<view>
			<scroll-view scroll-y="true" style="height: 500px;">
				<view class="tab" v-for="(item,i) in messageDetail" :key="i">
					<view class="td" @click="todetail(item.id)">
						<view class="message">
							<image src="../../static/images/trumpet.png" style="width: 50rpx;height: 45rpx;margin-left: 40rpx;"></image>
							<view class="name">{{item.titleName.length>10 ? item.titleName.substring(0,10)+'......' : item.titleName}}</view>
							<view class="time">{{formatDate(item.create_time)}}</view>
						</view>
						<view class="name1"></view>
						<view class="message1" >
							<view class="detail">查看详情</view>
							<image src="../../static/images/arrow.png" style="width: 25rpx; height: 35rpx;padding-left: 540rpx;
					padding-top: 25rpx;
					padding-bottom: 10rpx;"></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageDetail: [], //存信息页面的详细信息
				assId: '', //传入信息页面的assId
				detailId: '', //传入信息详情页面的id
				page: 0, //页数
				flag: 'true', //判断是否到底
				size: 6, //每次分页查询的数据量
				content: [], //信息详情
			}
		},
		onLoad(option) {
			this.assId = option.id;
			var that = this;
			//进入信息页面查询信息
			uni.request({
					url: getApp().globalData.URL + 'news/newsAssociationLimit',
					data: {
						id: that.assId,
						page: that.page,
						size: that.size,
					},
					header: {
						'content-type': 'application/json;charset=UTF-8' // 默认值
					},
					method: 'GET',
				})
				.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
					var [error, res] = data;
					console.log("成功连接!!");
					console.log(res.data);
					that.messageDetail = res.data;
					console.log(this.content);
				})
		},
		onReachBottom: function() { //当划到最底部的时候触发事件
			console.log("我是最底部了");
			if (this.flag == 'true') {
				this.getMoreNews();
			} else {
				uni.showToast({
					title: '到底了~',
					icon: 'none'
				});
			}

		},
		methods: {
			//日期转换方法
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '年' + MM + '月' + d + '日';
			},
			//跳转到咨询详情页面
			todetail(id) {
				this.detailId = id;
				uni.navigateTo({
					url: '/pages/home/detail?id=' + this.detailId
				})
			},
			getMoreNews: function() { //数据到底,触发这个函数
				this.page = this.page + 1;
				uni.showNavigationBarLoading(); //一读取数据,就进行刷新
				var that = this;
				uni.request({
					url: getApp().globalData.URL + 'news/newsAssociation',
					data: {
						id: this.messageId,
						page: this.page,
						size: this.size,
					},
					header: {
						'content-type': 'application/json;charset=UTF-8' // 默认值
					},
					success: res => {
						console.log("后台传来的", res.data);
						// that.alumnus = res.data;
						if (res.data.length == 0) {
							that.flag = 'false';
							that.page = that.page - 1;
							return false;
						}
						that.messageDetail = that.messageDetail.concat(Array.from(res.data)); //拼接数组
						uni.stopPullDownRefresh(); //数据加载完成,刷新结束
						uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止	
					},
				})
			}
		}
	}
</script>
<style>
	.message {
		display: flex;
		margin-top: 10rpx;
	}

	.time {
		font-size: 25rpx;
		margin-left: 100rpx;
		padding-top: 12rpx;
		color: #808080;
	}

	.message1 {
		display: flex;
		border-top: solid 0.5rpx #F9F9F9;
	}

	.detail {
		font-size: 30rpx;
		font-weight: 200;
		padding-top: 20rpx;
		padding-left: 40rpx;
		padding-bottom: 10rpx;
		color: #808080;
	}

	.name {
		width: 352rpx;
		font-size: 30rpx;
		font-weight: 600;
		padding-left: 15rpx;
		padding-top: 5rpx;
	}

	.name1 {
		font-size: 30rpx;
		margin-left: 44rpx;
		margin-top: 30rpx;
		margin-bottom: 15rpx;
		color: #808080;
	}

	.tit {
		color: #007AFF;
		margin: 10rpx 10rpx;

	}

	.tr {
		display: flex;
		height: 100rpx;
		/* border-bottom: 1rpx solid #007AFF; */
		/* margin-top: 10rpx; */
		/* margin: 10rpx 10rpx; */
		background-color: #FFFFFF;
		text-align: center;
	}

	.tab {
		margin-top: 20rpx;
	}

	.all {
		background-color: #F1F1F1;
		/* margin-top: 20rpx; */
	}

	.td {
		width: 100%;
		background-color: #FFFFFF;
		/* margin: 20rpx 20rpx; */
		/* border-radius: 2%; */
	}

	.te1 {
		font-size: 28rpx;

		margin: 20rpx 20rpx;
		margin-left: 590rpx;
		color: #007AFF;
		/* width: 100%; */

		/* border-bottom: 1px solid #007AFF; */
	}
</style>
